import React, { useState, useEffect } from "react";
import { useSearchParams, useNavigate } from "react-router";
import dayjs from "dayjs";
import durationPlugin from "dayjs/plugin/duration";
import "./TimerPage.scss";
import { Button } from "antd";

dayjs.extend(durationPlugin)
const ForwardTimer = () => {
    const navigate = useNavigate();
    const [searchParams] = useSearchParams();
    const initTime = parseInt(searchParams.get("time"));
    const [seconds, setSeconds] = useState(initTime); // 计时秒数
    const [isRunning, setIsRunning] = useState(false); // 是否正在计时
    const [timerId, setTimerId] = useState(null); // 定时器 ID

    // 格式化时间为 "hh:mm:ss"
    const formatTime = (totalSeconds) => {
        const duration = dayjs.duration(totalSeconds * 1000); // 转换为毫秒
        const hours = String(Math.floor(duration.asHours())).padStart(2, "0");
        const minutes = String(duration.minutes()).padStart(2, "0");
        const secs = String(duration.seconds()).padStart(2, "0");
        return `${hours}:${minutes}:${secs}`;
    };

    // 开始计时
    const startTimer = () => {
        if (!isRunning) {
            const id = setInterval(() => {
                setSeconds((prevSeconds) => prevSeconds + 1);
            }, 1000);
            setTimerId(id);
            setIsRunning(true);
        }
    };

    // 停止计时
    const stopTimer = () => {
        if (isRunning && timerId) {
            clearInterval(timerId);
            setIsRunning(false);
        }
    };

    // 重置计时器
    const resetTimer = () => {
        stopTimer();
        setSeconds(0);
    };

    // 清理定时器（组件卸载时）
    useEffect(() => {
        return () => {
            if (timerId) clearInterval(timerId);
        };
    }, [timerId]);

    const back2List = () => {
        stopTimer();
        navigate(`/?id=${searchParams.get("id")}&time=${seconds}`);
    };

    return (
        <div style={{ textAlign: "center", marginTop: "50px" }}>
            <div className="clock-box">
                <div className="loader">
                    <svg viewBox="0 0 80 80" height="80px" width="80px" y="0px" x="0px" id="Layer_1" version="1.1" className="clock">
                        <image
                            href=""
                            y="0" x="0" height="80" width="80" id="image0" />
                    </svg>
                    <div className="stage"></div>
                    <div className="hold">
                        <div className="ball"></div>
                    </div>
                </div>
            </div>
            <div style={{ fontSize: "48px", fontWeight: "bold", color: "#333" }}>
                {formatTime(seconds)}
            </div>
            <div className="control-button-box">
                <Button onClick={startTimer} disabled={isRunning}>开始</Button>
                <Button onClick={stopTimer} disabled={!isRunning}>停止</Button>
                <Button onClick={resetTimer}>重置</Button>
            </div>
            <Button onClick={back2List} style={{ width: '55vw' }}>返回</Button>
        </div>
    );
};

export default ForwardTimer;